<template>
  <view class="view" :style="{marginTop: marginTop + 'rpx'}">
    <u-button
      hover-class="none"
      @click="navTo"
      :custom-style="{
        border: 'none',
        width: '100%',
        borderRadius: '112rpx',
        fontSize: '34rpx',
        fontFamily: 'PingFang SC',
        fontWeight: '500',
        color: complete ? '#919AA9' : '#ffffff!important',
        overflow: 'hidden',
        height: '112rpx',
        background: complete ? '#F3F3F3' : 'linear-gradient(80deg, #ffb245, #ff814a)',
        boxShadow: complete ? '' : '0px 10rpx 40rpx 0px rgba(255, 128, 53, 0.41)',
        position: 'relative'
      }"
      :class="{gray: complete}"
      :disabled="complete"
      shape="circle"
      :hair-line="false"
    >
      <view :class="{left: align === 'left'}">
        {{ text }}
        <view v-if="more" class="more">
          <u-icon name="arrow-right" color="#fff" size="40"></u-icon>
        </view>
      </view>
    </u-button>
  </view>
</template>

<script>
  export default {
    data() {
      return {}
    },
    methods: {
      navTo() {
        this.$emit('navTo')
      }
    },
    props: {
      complete: {
        type: Boolean,
        default: () => {
          return false
        }
      },
      // 按钮文字
      text: {
        // 按钮是否为不能点击的状态
        type: String,
        default: () => {
          return null
        }
      },
      align: {
        type: String,
        default: 'center'
      },
      more: {
        type: Boolean,
        default: () => {
          return false
        }
      },
      marginTop: {
        type: Number,
        default: () => {
          return 120
        }
      }
    }
  }
</script>

<style scoped>
  .left {
    box-sizing: border-box;
    position: absolute;
    padding: 0 50rpx 0 70rpx;
    width: 100%;
    text-align: left;
    line-height: 112rpx;
  }
  .more {
    float: right;
    line-height: 112rpx;
  }
  .view {
    padding: 40rpx;
  }
</style>
